
<template>
    <div>
        <div class="flex">
            <el-input placeholder="查询内容" v-model="query"></el-input>
            <el-button @click="doQuery">确认</el-button>
        </div>
        <UTable loading :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
            :progress="{ color: 'primary', animation: 'carousel' }" v-if="tableData" :rows="tableData" :columns="columns">
            <template #actions-data="{ row }">
                <!-- <span class=" hover:cursor-pointer">{{ row.actions }}</span> -->
                <UDropdown :items="items(row)">
                    <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
                </UDropdown>
            </template>
          <template #tags-data="{ row }">
                <!-- <span class=" hover:cursor-pointer">{{ row.actions }}</span> -->
            <el-tag v-for="item in row.tags">
              {{options[+item]}}
            </el-tag>
            </template>
        </UTable>
        <UModal v-model="isOpen">
            <UCard>
                <template #header>
                    <div class="h-8">
                        <h1 class="text-lg font-bold">修改信息</h1>
                    </div>
                </template>
                <div class=" flex flex-col gap-9">
                    <div><span class=" text-2xl">id</span>
                        <UInput v-model="item.id" />
                    </div>
                    <div><span class=" text-2xl">user_id</span>
                        <UInput v-model="item.user_id" />
                    </div>
                    <div><span class=" text-2xl">username</span>
                        <UInput v-model="item.username" />
                    </div>
                    <div><span class=" text-2xl">tags</span>
                        <UInput v-model="item.tags" />
                    </div>
                    <div class="flex gap-2">
                        <UButton @click="() => { updateOne() }">
                            确认
                        </UButton>
                        <UButton color="white" @click="isOpen = false">
                            取消
                        </UButton>
                    </div>
                </div>
            </UCard>
        </UModal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const toast = useToast()
let item = reactive({
    id: '', user_id: '', username: '', tags: '',
})
let options = ref(['','有氧运动','长跑','瑜伽','健身'])
let tableData = ref([])
const query = ref('')
function fuzzySearch(query, target) {
    return target.toLowerCase().includes(query.toLowerCase());
}
let _tableData =ref([])
const doQuery = ()=>{
 if(query.value!==''){
    let out = tableData.value.filter(item=>{
    let content = JSON.stringify(item)
    return fuzzySearch(query.value,content)
 })
 tableData.value = out
}else{
    tableData.value = _tableData.value
}
}
let isOpen = ref(false)
function getAll() {
    axios.post('http://localhost:8000/user_tag/get_one', {}).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            console.log(resp)
        } else {
            tableData.value = resp.data
            _tableData.value = resp.data
        }
    })
}
function deleteOne(item) {
    axios.post('http://localhost:8000/user_tag/delete_one', item).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除成功',
                // description: resp.msg,
            })
            getAll()
        }
    })
}
function updateOne() {
    item.id = item.id
    axios.post('http://localhost:8000/user_tag/update_one', { 'cond': { 'id': item.id }, 'item': item }).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新成功',
                // description: resp.msg,
            })
            getAll()
            isOpen.value = false
        }
    })
}
getAll()

const columns = [
    { 'key': 'id', 'label': 'id' }, { 'key': 'user_id', 'label': '用户ID' }, { 'key': 'username', 'label': '用户名' }, { 'key': 'tags', 'label': '兴趣标签' },
    { 'key': 'actions', 'label': '操作' },
]

const items = (row) => [
    [ {
        label: '删除',
        icon: 'i-heroicons-trash-20-solid',
        click: () => { deleteOne(row) }
    }]
]

</script> 

<style scoped>.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}</style>

